<template>
  <div id="chart-panel" ref="chart"></div>
</template>
<script>
export default {
  name: 'bilinear',
  data() {
    return {}
  },
  created() {
    this.$nextTick(() => {
      this.getColum()
    })
  },
  mounted() {},
  methods: {
    getColum() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        var value = 0.65
        const option = {
          title: {
            text: ''
          },
          series: [
            {
              type: 'liquidFill',
              radius: '78.1%',
              center: ['50%', '50%'],

              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#16FFF1' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#37D3FF' // 100% 处的颜色
                    }
                  ]
                }
              ],
              data: [value, value], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 1,
                borderColor: 'rgba(55, 211, 255, 0.42)',
                color: 'rgba(12, 41, 49, 0.6)'
              },
              outline: {
                show: false
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    }
  }
}
</script>
<style scoped>
#chart-panel {
  width: 100%;
  height: 200px;
}
</style>
